<template>
  <normal-layout page-index="4-2">
    <div class="bodyDiv">

      <el-card style="width: 100%;height: 900px">
        <div slot="header" style="display: flex; justify-content: space-between">
          <h3>修程修制优化</h3>
          <el-button @click="drawer = true" style="float: right; padding: 3px 0" type="text">刷新列表</el-button>
        </div>
<!--        <div>
          <el-select placeholder="选择车种" style="margin-right: 10px"></el-select>
          <el-select placeholder="选择车型" style="margin-right: 10px"></el-select>
          <el-select placeholder="选择车号" style="margin-right: 10px"></el-select>
          <el-select placeholder="选择零件" style="margin-right: 10px"></el-select>
          <el-button>筛选数据</el-button>
        </div>-->
        <div style="display: flex; justify-content: space-between; padding: 10px; ">
          <div>
            <el-select placeholder="选择车种" style="margin-right: 10px"></el-select>
            <el-select placeholder="选择车型" style="margin-right: 10px"></el-select>
            <el-select placeholder="选择车号" style="margin-right: 10px"></el-select>
            <el-select placeholder="选择零件" style="margin-right: 10px"></el-select>
          </div>
          <el-button-group>
            <el-button type="primary" icon="el-icon-arrow-left">筛选数据</el-button>
          </el-button-group>
        </div>
        <el-table :data="testData"
                  style="width: 100%;height: 710px;overflow-y: auto" ref="table" stripe highlight-current-row>
          <el-table-column type="expand">
            <template slot-scope="props">
                <el-card class="icon-plus">
                  <div slot="header">
                    <span style="font-weight: bold">一级修程修制</span>
                  </div>
                  <el-form label-width="150px" label-position="left" style="margin: 20px">
                    <el-form-item label="修程周期：">
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="修制检修范围：">
                      <el-input></el-input>
                    </el-form-item>
                  </el-form>
                </el-card>
              <el-card class="icon-plus">
                <div slot="header">
                  <span style="font-weight: bold">二级修程修制</span>
                </div>
                <el-form label-width="150px" label-position="left" style="margin: 20px">
                  <el-form-item label="修程周期：">
                    <el-input></el-input>
                  </el-form-item>
                  <el-form-item label="修制检修范围：">
                    <el-input></el-input>
                  </el-form-item>
                </el-form>
              </el-card>
              <el-card class="icon-plus">
                <div slot="header">
                  <span style="font-weight: bold">三级修程修制</span>
                </div>
                <el-form label-width="150px" label-position="left" style="margin: 20px">
                  <el-form-item label="修程周期：">
                    <el-input></el-input>
                  </el-form-item>
                  <el-form-item label="修制检修范围：">
                    <el-input></el-input>
                  </el-form-item>
                </el-form>
              </el-card>
              <el-card class="icon-plus">
                <div slot="header">
                  <span style="font-weight: bold">四级修程修制</span>
                </div>
                <el-form label-width="150px" label-position="left" style="margin: 20px">
                  <el-form-item label="修程周期：">
                    <el-input></el-input>
                  </el-form-item>
                  <el-form-item label="修制检修范围：">
                    <el-input></el-input>
                  </el-form-item>
                </el-form>
              </el-card>
              <el-card class="icon-plus">
                <div slot="header">
                  <span style="font-weight: bold">五级修程修制</span>
                </div>
                <el-form label-width="150px" label-position="left" style="margin: 20px">
                  <el-form-item label="修程周期：">
                    <el-input></el-input>
                  </el-form-item>
                  <el-form-item label="修制检修范围：">
                    <el-input></el-input>
                  </el-form-item>
                </el-form>
              </el-card>
            </template>
          </el-table-column>
          <el-table-column prop="class" label="车种">
<!--            <template slot="header" slot-scope="scope">
              <el-select
                v-model="search"
                size="mini"
                placeholder="车种"/>
            </template>-->
          </el-table-column>
          <el-table-column label="车型" prop="type">
<!--            <template slot="header" slot-scope="scope">
              <el-select
                v-model="search"
                size="mini"
                placeholder="车型"/>
            </template>-->
          </el-table-column>
          <el-table-column label="车号" prop="id">
<!--            <template slot="header" slot-scope="scope">
              <el-select
                v-model="search"
                size="mini"
                placeholder="车号"/>
            </template>-->
          </el-table-column>
          <el-table-column label="零件" prop="part">
<!--            <template slot="header" slot-scope="scope">
              <el-select
                v-model="search"
                size="mini"
                placeholder="零件"/>
            </template>-->
          </el-table-column>
          <el-table-column label="一级修成周期" prop="period1"></el-table-column>
          <el-table-column label="二级修成周期" prop="period2"></el-table-column>
          <el-table-column label="三级修成周期" prop="period3"></el-table-column>
          <el-table-column label="四级修成周期" prop="period4"></el-table-column>
          <el-table-column label="五级修成周期" prop="period5"></el-table-column>
        </el-table>
        <el-pagination></el-pagination>
      </el-card>
    </div>
  </normal-layout>
</template>

<script>
  import NormalLayout from "../../components/NormalLayout";
    export default {
      name: "MaintainOprimization",
      components:{NormalLayout},
      data(){
        return{
          testData:[
            {
              class:'普通车',
              type:'QG-125',
              id:'3762',
              part:'轴承',
              period1:'xxx',
              period2:'xxx',
              period3:'xxx',
              period4:'xxx',
              period5:'xxx',
            },
            {
              class:'冷藏车',
              type:'QG-125',
              id:'3762',
              part:'轴承',
              period1:'xxx',
              period2:'xxx',
              period3:'xxx',
              period4:'xxx',
              period5:'xxx',
            },
            {
              class:'普通车',
              type:'CF-365',
              id:'5628',
              part:'中子',
              period1:'xxx',
              period2:'xxx',
              period3:'xxx',
              period4:'xxx',
              period5:'xxx',
            },
            {
              class:'普通车',
              type:'JI-361',
              id:'5628',
              part:'转子',
              period1:'xxx',
              period2:'xxx',
              period3:'xxx',
              period4:'xxx',
              period5:'xxx',
            },
          ],
        }
      },
      methods:{
        toogleExpand(row) {
          let $table = this.$refs.table;
          $table.toggleRowExpansion(row)
        }
      }
    }
</script>

<style scoped>
  .bodyDiv{
    margin: 10px;
  }
  .icon-plus{
    margin: 10px;
  }
</style>
